<template>
  <div class="container">
    <el-card>
      <section class="header" slot="header">
        <h3>商品管理</h3>
        <el-button type="primary" @click="onAdd">添加</el-button>
      </section>
      <el-table :data="list" stripe>
        <el-table-column prop="productCategoryName" label="商品分类" align="center" />
        <el-table-column prop="stock" label="商品数量" align="center" />
        <el-table-column prop="originalPrice" label="商品价格" align="center" />
        <el-table-column prop="qualityLevel" label="新旧程度" align="center" />
        <el-table-column prop="newStatu" label="代卖状态" align="center" />
        <el-table-column prop="detailTitle" label="所在城市" align="center" />
        <el-table-column label="操作" align="center">
          <template  slot-scope="product_bt">
            <div class="btn-box">
              <el-button type="text" @click="productDelete(product_bt.$index , product_bt.row)">删除</el-button>
              <el-button type="text" @click="productModify(product_bt.$index , product_bt.row)">修改</el-button>
            </div>
            <div class="btn-box">
              <el-button type="text" @click="productSale(product_bt.$index , product_bt.row)">申请代卖</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
           @current-change="handleCurrentPageChange"
          layout="prev, pager , next"
          :total="total">
      </el-pagination>
    </el-card>
  </div>
</template>
<script>
  import { doList, doDelete, doProductSale } from '@/apis/product';
  export default {
    name: 'MineProducts',
    data() {
      return {
        list: [],
        limit: 10,
        page: 1,
        total: 0
      };
    },
    methods: {
      async productSale(index, row) {
        console.log(row);
        const data = {
          ids: row.id,
          newStatus: 2
        };
        const res = await doProductSale(data);
        if ((res !== undefined) && (res.code === 200)) {
          // alert('申请代卖成功！');
        } else {
          alert('申请代卖失败！');
          return;
        }
        this.updateList();
      },

      async updateList() {
        const params = {
          pageSize: this.limit,
          pageNum: this.page,
          memberId: this.cache.fetchUser().id
        };
        const res = await doList(params);
        if (res == null) {
          return;
        }
        this.list = res.data.list;
        this.instead_status();
      },
      async productDelete(index, row) {
        // console.log('productDelete');
        // console.log(JSON.stringify(index));
        const data = {
          ids: row.id,
          publishStatus: row.publishStatus
        };
        await doDelete(data);
      },
      productModify(index, row) {
        // console.log('productModify');
        // console.log(JSON.stringify(index));
        /*
        console.log(JSON.stringify(row));
        const data = {
          ids: [row.id],
          publishStatus: row.publishStatus
        };
        doDelete(data);
        */
        // console.log(row);
        this.$router.push({ name: 'productsAdd', params: row });
      },
      onAdd() {
        this.$router.push({ path: 'ProductsAdd' });
      },

      instead_status() {
        for (const value of this.list) {
          if (value.verifyStatus === 0) {
            value['newStatu'] = '未审核';
          } else if (value.verifyStatus === 1) {
            value['newStatu'] = '审核通过';
          } else {
            value['newStatu'] = '审核中';
          }
        }
      },
      async handleCurrentPageChange(no) {
        if (this.page === parseInt(no)) {
          return;
        }
        this.page = parseInt(no);
        const params = {
          pageSize: this.limit,
          pageNum: this.page,
          memberId: this.cache.fetchUser().id
        };
        const res = await doList(params);
        if (res == null) {
          return;
        }
        this.list = res.data.list;
        this.instead_status();
      },
      async fetchList() {
        const params = {
          pageSize: this.limit,
          pageNum: this.page,
          memberId: this.cache.fetchUser().id
        };
        const res = await doList(params);
        if (res == null) {
          return;
        }
        console.log('produce management---------->');
        console.log(JSON.stringify(res.data));
        if (res.data.total > this.limit) {
          this.list = res.data.list;
          // this.total = Math.ceil(res.data.total / this.limit);
          this.total = res.data.total;
        } else {
          this.list = res.data.list;
          this.total = 1;
        }
        this.instead_status();
      }
      /*
      async fetchList() {
        const params = {
          pageSize: this.limit,
          pageNum: this.page,
          memberId: this.cache.fetchUser().id
        };
        const res = await doList(params);
        this.total = res.data.total;
        this.list = res.data.list;
        const list_test = await doList({ memberId: this.cache.fetchUser.id });
        console.log(JSON.stringify(list_test));
        console.log(list_test.data.total);
      }*/
    },
    mounted() {
      this.fetchList();
    },
    created() {}
  };
</script>
<style lang="scss" type="text/scss" scoped>
.el-card {
  width: 100%;
}

.header {
  @include h-btw();
}

.el-pagination {
    text-align: center;
}

.btn-box {
  @include v-center();
  justify-content: center;
  /* display: flex;
  flex-direction: column;
  align-items: center; */
  /* .el-button {
    margin: 0;
  } */
}
</style>
